<template>
  <div class="">
    <div class="sec-title">敏感信息详情</div>
    <sec-table style="margin-bottom: 20px" :tableData="tableData" :tableCol="tableCol"> </sec-table>
    <el-pagination
      style="margin-bottom: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      background
      :layout="layout"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="totalSize"
    >
    </el-pagination>
    <el-drawer title="详情" :visible.sync="drawer" size="50%" append-to-body>
      <el-collapse v-model="collapseVal" style="margin: 0 20px">
        <el-collapse-item title="User_Agent" name="userAgent">
          <el-input
            class="https-textarea"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10 }"
            :rows="2"
            placeholder="请输入"
            v-model="userAgent"
          >
          </el-input>
        </el-collapse-item>
        <el-collapse-item title="请求样本" name="reqExample">
          <el-collapse v-model="activeNames" style="margin: 0 20px">
            <el-collapse-item v-for="(item, index) in collapseCol" :key="index" :title="item.title" :name="item.name">
              <el-input
                class="https-textarea"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 10 }"
                :rows="2"
                placeholder="请输入"
                v-model="collapseColData[item.name]"
              >
              </el-input>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>

<script>
import { sampleDetailApi, sampleListApi } from "api/riskCenterApi";
import { paginationMixin } from "@/mixins/pagination";
export default {
  name: "secAnaSamples",
  mixins: [paginationMixin],
  props: {},
  components: {},
  data() {
    return {
      tableCol: [],
      tableData: [],
      //查看抽屉展示的内容需要的数据
      activeNames: [],
      collapseVal: ["userAgent", "reqExample"],
      collapseColData: {},
      userAgent: [],
      collapseCol: [
        { title: "URL", name: "query" },
        { title: "请求头", name: "requestHeader" },
        { title: "请求体", name: "requestBody" },
        { title: "响应头", name: "responseHeader" },
        { title: "响应体", name: "responseBody" },
        // { title: "cookie", name: "cookie" },
      ],
      drawer: false,
    };
  },
  computed: {},
  created() {
    this.optCol = {
      type: "operation",
      label: "详情",
      children: [
        {
          label: "查看",
          click: ({ row }) => {
            console.log(row);
            // uniqId: row.uniqueId
            sampleDetailApi({ ...this.getComParams(), item: row }).then((res) => {
              console.log("[ res ] >", res);
              let data = res.data;
              this.activeNames = [];
              this.collapseColData = data.sample;
              this.userAgent = data.userAgent;
              for (let key in data.sample) {
                this.activeNames.push(key);
              }
              this.drawer = true;
            });
          },
        },
      ],
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    getComParams() {
      let { params, query } = this.$route;
      let { type, source, group } = params;
      let { uniqId } = query;
      return { type, source, group, uniqId };
    },
    initPage() {
      sampleListApi({ ...this.getComParams(), pageSize: this.pageSize, pageNum: this.page }).then((res) => {
        let { list, columns } = res.data;
        this.totalSize = res.count;
        columns.forEach((item) => {
          if (item.prop === "wholeMatchInfo") {
            item["showOverflowTooltip"] = true;
          }
        });
        this.tableCol = [...columns, this.optCol];
        this.tableData = list;
      });
    },
    // 页码变更
    handleCurrentChange(val) {
      this.page = val;
      this.initPage();
    },
    // 条数变更
    handleSizeChange(val) {
      this.pageSize = val;
      this.initPage();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
